<template>
  <div class="home">
    <ArticleList />
  </div>
</template>

<script setup>
import ArticleList from './ArticleList.vue'
</script>

<style scoped>
.rainbow-title {
  font-size: 2em;
  font-weight: bold;
  text-align: center;
  background: linear-gradient(
    to right, 
    #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbow-animation 6s linear infinite;
}

@keyframes rainbow-animation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
</style>